<template>
    <div class="enter-work-account-safe">
        <div class="account-safe-content">
            <div class="account-safe-table enterprise-table">
                <div class="actions-bar">
                    <el-button type="primary" size="small" @click="updateMessageByIds">标记为已读</el-button>
                    <el-button size="small" @click="deleteMessageByIds">删除</el-button>
                </div>
                <div class="table-content">
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            label="消息内容"
                            :show-overflow-tooltip='true'
                            width="300">
                            <template slot-scope="scope">{{ scope.row.contentMsg }}</template>
                        </el-table-column>
                        <el-table-column
                            prop="statusText"
                            label="状态"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            prop="time"
                            label="发送时间"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
<!--                                <a class="text-blue mr5">查看</a>-->
                                <a @click="deleteMessage(scope.row.id)">删除</a>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="table-pagination">
                    <el-pagination
                        background
                        :layout="pagination.layout"
                        :total="pagination.total"
                        :page-sizes="pagination.pageSizes"
                        :current-page.sync="pagination.page"
                        @current-change="pageChange"
                        @size-change="sizeChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    accountMessageDelete,
    accountMessageDeleteByIds,
    accountMessageList,
    accountMessageUpdateByIds
} from '@/api/enterprise/work/account'
import moment from 'moment'
import { del } from '@/api/enterprise/work/job'
import { checkResponse } from '@/utils'

export default {
    name: 'enterpriseWorkAccountMsg',
    components: {},
    data() {
        return {
            queryParam: {
                state: 1
            },
            tableData: [
                {
                    id: 1,
                    name: '感谢您使用厦门市思明区台湾人才服务中心系统',
                    statusText: '未查看',
                    time: '2020-08-25 17:19'

                }
            ],
            multipleSelection: []
        }
    },
    created() {
        this.init()
    },
    methods: {
        init(reload = false) {
            if (reload) {
                this.requestData.page = 1
            }
            this.getList()
        },
        getList() {
            let obj = Object.assign({ ...this.queryParam }, { ...this.requestData })
            accountMessageList(obj).then(res => {
                res.data.forEach(v => {
                    switch (v.viewStatus) {
                        case 0:
                            v.statusText = '未查看'
                            break
                        case 1:
                            v.statusText = '已查看'
                            break
                    }
                    v.time = v.createTime ? moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''
                })
                this.tableData = res.data
                this.pagination.total = res.count
            })
        },
        updateMessageByIds() {
            let app = this
            this.$confirm('确定标记为已读吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = []
                app.multipleSelection.forEach(v => {
                    ids.push(v.id)
                })
                accountMessageUpdateByIds({ ids: ids }).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '标记成功!'
                        })
                    }
                })
            })
        },
        deleteMessageByIds() {
            let app = this
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = []
                app.multipleSelection.forEach(v => {
                    ids.push(v.id)
                })
                accountMessageDeleteByIds({ ids: ids }).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            })
        },
        deleteMessage(id) {
            let app = this
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                accountMessageDelete(id).then(res => {
                    if (checkResponse(res, true)) {
                        app.init()
                        app.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        }
    }
}
</script>
<style lang="scss" scoped="scoped">
.enter-work-account-safe {
    background: #FFF;
    padding: 10px 20px;

    .account-safe-content {
        position: relative;

        .account-safe-actions {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
</style>
